<html>

<head>
  <link rel="icon" href="app/editor/static/preview-templates/favicon.ico">
  </link>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <style>
    @media screen and (min-width:710px) {
      .logo {
        display: "";
        pointer-events: none;
      }

      .btnThin {
        border-radius: 15px;
        padding: 0.5em;
      }

      .btnBold {
        border-radius: 15px;
        font-weight: bolder;
        padding: 0.5em;
      }

    }

    @media screen and (max-width:709px) {
      .logo {
        display: none;
        pointer-events: none;
      }

      .btnThin {
        border-radius: 5px;
        padding: 0;
      }

      .btnBold {
        border-radius: 5px;
        font-weight: "";
        padding: 0;
      }
    }

    .topBanner {
      background: black;
      font-size: 1em;
      color: white;
      padding: 0.5em;
      text-align: left;
      display: flex;
    }

    .vmFrame {
      width: 1px;
      min-width: 100%;
      /* 100%; */
      border: none;
      padding: 0px;
      margin: 0px;
    }

    .menuPad {
      font-size: 1.0em;
      min-width: 100px;
      width: 140px;
      background: gray;
      border-radius: 15px;
      padding: 0.4em;
    }

    .menuPad button {
      width: 100%;
    }

    .subPad {
      margin-bottom: 10px;
      background: gray;
      border-radius: 15px;
      padding: 0.4em;
    }

    .menuPad .subPad {
      background: none;
      border-top: 1px dashed black;
      border-radius: 0px;
      padding: 0;
    }
  </style>
</head>

<body>
  <div style="display: flex;flex-direction: column;">
    <div class="topBanner" style="align-items:center;order:1">
      <div class="logo">
        <img src="logo.png" style="height:30px" /> <span name="appInfo"></span>
      </div>

      <div style="text-align:center; flex-grow: 1;">
        <input name="btnPageNum" value="◀" type="submit" onclick="onClickChangePage('<')" />
        <input name="ebPageNum" placeholder="页码" style="text-align:center; width:3em;" />
        <input name="btnPageNum" value="▶" type="submit" onclick="onClickChangePage('>')" />
      </div>

      <div>
        学生<span name="studentCount" style="color:darkorange">0</span>个
        <button class="btnBold" name="btnAddTeacher" onclick="onClickTeacherEnter()">添加老师</button>
        <button class="btnBold" onclick="onClickAddRole(2)">添加学生</button>
      </div>
      <div>
        <button name="btnColumn" class="btnBold" onclick="onToggleColumn()">列切换</button>
        <button name="btnOther" class="btnThin"
          onclick="document.querySelector('div[name=otherPad]').style.display = document.querySelector('div[name=otherPad]').style.display=='none'?'':'none' ">其他</button>
      </div>
      <div name="otherPad" class="menuPad" style="
        display:none;
        position: absolute;
        right: 0px;
        top: 40px;
        padding: 10px 5px;">
        <div class="subPad" name="appPad">
          <button class="btnBold" onclick="onClickAddRole(1)">添加助教</button>
        </div>
        <div class="subPad">
          <input type="checkbox" checked name="HarkConsole" onclick="onToggleHackConsole()" /> HackConsole
          <br />
          <input type="checkbox" checked name="AutoAddTeacher" onclick="onToggleAutoAddTeacher()" /> 自动添加老师
          <br />
          <!-- <input name="totalPageCount" placeholder="总页数" value="1" style="text-align:center; width:3em;" />课件页数
          <br /> -->
          <button name="btnClearLastMsg" class="btnBold" onclick="onClickClearLastMsg()">清空最后一个数据</button>
          <button class="btnBold" onclick="onClickLogLastMsg()">LOG最后一个数据</button>
          <button name="btnDoc" class="btnBold" onclick="onClickHelp()">文档</button>
        </div>
        <div class="subPad" name="appPad">
          <div>APP功能</div>
          <!-- <button name="btnClass" style="padding:0.5em;font-weight: bold; color:white" onclick="onToggleClass()">上课</button> -->
          <button name="btnPermissionOpen" class="btnThin" onclick="App.onClickAllPermission(true)">全部授权</button>
          <br />
          <button name="btnPermissionClose" class="btnThin" onclick="App.onClickAllPermission(false)">取消全部授权</button>
          <br />
        </div>
      </div>

    </div>
    <div style="scrollbar-width: 2px;order:2" name="container"></div>
  </div>
</body>

<script>
  const MACRO = {
    APP_NAME: "本地拓课云",
    VERSION: "0.42",
    VERSION_DATE: "1673601795454",
    DEV_LOG: [
      ["0.40", "增加助教角色。"],
      ["0.41", "将一些不常用的功能放到“其他”中；其他UI优化；列切换时状态会保存；"],
      ["0.42", "优化切页数字输入，且不再限制最大页数；"]
    ]
  };
  class UserInfo {
    constructor(id, role, nickname) {
      Object.assign(this, {
        id, role, nickname
      });
    }
  }
  class TKUser {
    constructor(info) {
      this._valid = true;
      this.info = info;

      this.wrap = null;
      this.banner = null;
      this.iframe = null;
      this.window = null;

      this._blocked = 0;
    }
    get blocked() {
      return this._blocked;
    }
    set blocked(val) {
      this._blocked = val;
      if (this.info.role == 0) {
        this._blocked = 0;
      }
      if (this.blocker) {
        this.blocker.style.display = this._blocked == 0 ? "none" : "";
      }
    }
    createFrame() {
      let userInfo = this.info;
      let wrap = document.createElement("div");
      container.appendChild(wrap);
      let banner = document.createElement("div");

      Object.assign(banner.style, {
        background: ["red", "pink", "green"][userInfo.role],
        color: "white",
        fontSize: "0.5em",
        padding: "0 1em"
      });
      banner.innerHTML =
        `${userInfo.id}-${userInfo.nickname}-(${["老师", "助教", "学生"][userInfo.role]})
        ${userInfo.role == 2 ? `<button onclick="onClickTogglePermission('${userInfo.id}')">权限</button>` : ""}
        <button onclick="onClickRefreshRole('${userInfo.id}')">刷新</button>
        <!--< button onclick = "onClickOffline('${userInfo.id}')" > 重新上线</button > -->
        <button onclick="onClickDelRole('${userInfo.id}')">退出</button>`;

      wrap.appendChild(banner);

      let iframe = document.createElement("iframe");
      iframe.setAttribute("name", `vmFrame${userInfo.id}`);
      iframe.setAttribute("allow", "autoplay");
      iframe.setAttribute("scrolling", "no");
      iframe.setAttribute("width", "1px");
      iframe.setAttribute("height", "100%");
      iframe.src = `index-single.html?role=${userInfo.role}&name=${userInfo.nickname}&userid=${userInfo.id} `;
      iframe.className = "vmFrame";
      wrap.appendChild(iframe);
      this.wrap = wrap;
      this.banner = banner;
      this.iframe = iframe;
      this.window = this.iframe.contentWindow;

      this.iframe.onload = () => {
        this.blocker = iframe.contentDocument.getElementById("blocker");
        this.blocker.style.display = this._blocked == 0 ? "none" : "";
        if (userInfo.role == 0) {
          this.blocker.parentNode.removeChild(this.blocker);
        }
      };

      hackConsole(this.window);
      refreshColumn();
    }
    refresh() {
      this.window.location.reload();
    }
    dispose() {
      this.wrap.parentNode.removeChild(this.wrap);
      this.iframe = null;
      this.info = null;
      this._valid = false;
    }
  };
  const property = [
    "log",
    "info",
    "warn",
    "error",
    "debug"
  ];
  const originFunc = {};
  for (let i = 0; i < property.length; i++) {
    originFunc[property[i]] = console[property[i]];
  }
  var passArgs = function (...args) {
    let params = [];
    for (let i = 0; i < args.length; i++) {
      params.push(args[i]);
    }
    let windowName = this[1].name || "ROOT";
    this[0].call(console, `【${windowName}】`, ...params);
  };
  var hackConsole = function (window) {
    if (!LocalClassroom.isHackConsole) {
      return;
    }
    if (!window.console._hacked) {
      for (let i = 0; i < property.length; i++) {
        let key = property[i];
        window.console[key] = passArgs.bind([originFunc[key], window])
      }
      window.console._hacked = true;
    }
  };
  var restoreConsole = function (window) {
    if (LocalClassroom.isHackConsole) {
      return;
    }
    if (window.console._hacked) {
      for (let i = 0; i < property.length; i++) {
        let key = property[i];
        window.console[key] = originFunc[key];
      }
      delete window.console._hacked;
    }
  };
  var onToggleAutoAddTeacher = function () {
    LocalClassroom.isAutoAddTeacher = checkAutoAddTeacher.checked ? 1 : 0;
    LocalClassroom.save();
  };
  var onToggleHackConsole = function () {
    LocalClassroom.isHackConsole = checkHackConsole.checked ? 1 : 0;
    LocalClassroom.save();
    if (LocalClassroom.isHackConsole) {
      hackConsole(window);
      for (let i = 0; i < LocalClassroom.userList.length; i++) {
        let user = LocalClassroom.userList[i];
        hackConsole(user.window);
      }
    }
    else {
      restoreConsole(window);
      for (let i = 0; i < LocalClassroom.userList.length; i++) {
        let user = LocalClassroom.userList[i];
        restoreConsole(user.window);
      }
    }
  };
</script>
<script>
  let appPad = document.querySelector("div[name=appPad]");
  let container = document.querySelector("div[name=container]");
  let lbStudentCount = document.querySelector("span[name=studentCount]");
  let ebConfigJSON = document.querySelector("input[name=ebConfigJSON]");
  let ebPageNum = document.querySelector("input[name=ebPageNum]");
  let ebPageNumUpdate = () => {
    let pageId = Number(ebPageNum.value);
    if (LocalClassroom == pageId) {
      return;
    }
    onClickJumpPage(pageId);
  };
  let ebPageNumUpdateId = 0;
  ebPageNum.addEventListener('focus', (event) => {
    console.log("focus");
    ebPageNumUpdateId = setInterval(ebPageNumUpdate, 40);
  });
  ebPageNum.addEventListener('blur', (event) => {
    console.log("blur");
    clearInterval(ebPageNumUpdateId);
    ebPageNumUpdateId = 0;
  });

  let fileInput = document.querySelector("input[name=fileInput]");
  let pConfigInfo = document.querySelector("p[name=configInfo]");
  let btnAddTeacher = document.querySelector("button[name=btnAddTeacher]");
  let btnClearLastMsg = document.querySelector("button[name=btnClearLastMsg]")
  let btnPermissionOpen = document.querySelector("button[name=btnPermissionOpen]");
  let btnPermissionClose = document.querySelector("button[name=btnPermissionClose]");
  // let ebTotalPageCount = document.querySelector("input[name=totalPageCount]");
  // ebTotalPageCount.addEventListener('blur', (event) => {
  //   let tpc = Number(ebTotalPageCount.value);
  //   if (tpc) {
  //     LocalClassroom.totalPageCount = tpc;
  //     LocalClassroom.save();
  //   }
  // });

  let checkHackConsole = document.querySelector("input[name=HarkConsole]");
  let checkAutoAddTeacher = document.querySelector("input[name=AutoAddTeacher]");

  let title = document.getElementsByTagName('title')[0];
  title.innerText = MACRO.APP_NAME + MACRO.VERSION;
  let appInfo = document.querySelector("span[name=appInfo]");
  appInfo.innerText = MACRO.VERSION;

  var parseUrlParam = function () {
    let url = window.location.href;
    let parse = url.substring(url.indexOf("?") + 1);
    let params = parse.split("&");
    let len = params.length;
    let item = [];
    let param = {};
    for (let i = 0; i < len; i++) {
      item = params[i].split("=");
      param[item[0]] = item[1];
    }
    return param;
  };
  const urlParams = parseUrlParam();

  var App = {
    inited: false,
    onClickAllPermission(bool) {
      for (let i = 0; i < LocalClassroom.userList.length; i++) {
        let user = LocalClassroom.userList[i];
        user.blocked = bool ? 0 : 1;
      }
      this.broadcastPermission();
    },
    init() {
      window.addEventListener("message", (evt) => {
        if (typeof evt.data === "string") {
          return;
        }
        let protocol = evt.data.protocol || evt.data.nativeData?.protocol;
        let data = evt.data.data; // || evt.data.nativeData?.data;
        switch (protocol) {
          case "100000":
            this.sendMsg({
              protocol: "100000",
            }, evt.source);
            break;
          case "100004": //单个权限
            let user = LocalClassroom.getUser(data.userId);
            user.blocked = data.status ? 0 : 1;
            this.sendMsg({
              protocol: "100004",
              data: {
                ret: 0,
                data: data
              }
            }, evt.source);
            break;
          case "100005": //全部权限
            for (let i = 0; i < LocalClassroom.userList.length; i++) {
              let user = LocalClassroom.userList[i];
              user.blocked = data.status ? 0 : 1;
            }
            this.sendMsg({
              protocol: "100005",
              data: {
                ret: 0,
                data: data
              }
            }, evt.source);
            break;
          case "100006": //权限状态。
            //获取当前的状态。
            let pmList = this.getPermissionStatus();
            this.sendMsg({
              protocol: "100006",
              data: {
                ret: 0,
                data: pmList
              }
            }, evt.source);
            break;
        }
      }, false);

      this.inited = true;
      console.log("模拟APP初始完毕");
    },
    broadcastPermission() {
      let pmList = this.getPermissionStatus();
      let data = {
        protocol: "100006",
        data: {
          ret: 0,
          data: pmList
        }
      };

      this.broadcast(data)
    },
    broadcast(data) {
      for (let i = 0; i < LocalClassroom.userList.length; i++) {
        this.sendMsg(data, LocalClassroom.userList[i].window);
      }
    },
    getPermissionStatus() {
      let data = [];
      for (let i = 0; i < LocalClassroom.userList.length; i++) {
        let usr = LocalClassroom.userList[i];
        data.push({
          authStatus: usr.blocked != 0 ? 0 : 1,
          userId: usr.info.id
        });
      }
      return data;
    },
    sendMsg(data, tag) {
      let win = null;
      if (typeof tag == "string") {
        let user = this.getUser(tag);
        if (!user) {
          return;
        }
        win = user.window;
      }
      else {
        win = tag;
      }

      win.postMessage(data, '*');
    },
  };
  var LocalClassroom = {
    inClass: false,
    configJSON: null,
    pageId: 1,
    userList: [],
    totalPageCount: 20, //不再用作限制
    isHackConsole: 1,
    isAutoAddTeacher: 1,
    columnType: 1,
    load() {
      try {
        let dataStr = window.localStorage.getItem("FakeTK");
        let data = JSON.parse(dataStr);
        Object.assign(this, data);
      } catch (e) {
        console.warn("LocalClassroom::load, warn: ", e);
        this.save();
      }
    },
    save() {
      window.localStorage.setItem("FakeTK", `{
          "totalPageCount": ${this.totalPageCount},
          "isHackConsole": ${this.isHackConsole},
          "isAutoAddTeacher": ${this.isAutoAddTeacher},
          "columnType": ${this.columnType}
        }`);
    },
    init() {
      this.load();
      checkHackConsole.checked = this.isHackConsole;
      checkAutoAddTeacher.checked = this.isAutoAddTeacher;

      ebPageNum.value = 1;

      if (this.columnType == 2 && container.style.display == "") {
        container.style.display = "flex";
        container.style.flexWrap = "wrap";
        refreshColumn();
      }

      window.addEventListener("message", (evt) => {
        if (typeof evt.data !== "string") {
          // console.log("LocalClassroom: 收到的消息中evt.data为对象时，不作处理。");
          return;
        }
        let msg = null;
        try {
          msg = JSON.parse(evt.data);
        } catch (e) {
          console.log("LocalClassroom: 消息解析失败", e);
          return;
        }
        if (!msg) {
          return;
        }

        /** 如果是onLoadComplete ，单独给这个用户发送onJumpPage */
        if (msg.method == "onLoadComplete") {
          LocalClassroom.sendMsg(JSON.stringify({
            method: "onJumpPage",
            toPage: LocalClassroom.pageId
          }), evt.source);
          let msg = LocalClassroom.cloneLastMsg();
          if (msg) {
            LocalClassroom.sendMsg(JSON.stringify(msg), evt.source);
          }

          if (LocalClassroom.inClass) {
            if (evt.source.name == "vmFrameuuid-teacher") {
              LocalClassroom.sendMsg(JSON.stringify({
                method: "onUserChange",
                data: {
                  type: "create",//上课
                  users: LocalClassroom.userInfoList()
                }
              }), evt.source);
            }
          }
        }
        else { //fileMessage
          //判断是否有权限可以发送。
          let user = null;
          LocalClassroom.userList.forEach(tu => {
            if (tu.window != evt.source) {
              return true;
            }
            user = tu;
            return false;
          });
          if (!user.blocked) {
            //如果是fileMessage，记录最后一条。
            if (msg.method == "onFileMessage") {
              // LocalClassroom.msgs.push(msg);
              LocalClassroom.lastMsg = JSON.parse(JSON.stringify(msg));
              if (!LocalClassroom.lastMsg) {
                btnClearLastMsg.setAttribute("disabled", "");
              }
              else {
                btnClearLastMsg.removeAttribute("disabled");
              }
            }
            LocalClassroom.broadcast(evt.data, evt.source);
          }
          else {
            // console.log(`用户 ${user.info.nickname} 没有权限发送消息`);
          }
        }
      }, false);

      console.log("本地拓课云初始完毕");
    },

    toggleClass() {
      this.inClass = !this.inClass;
      this.lastMsg = null;

      if (this.inClass) {
        let teacher = this.getTeacher();
        if (teacher) {
          this.sendMsg(JSON.stringify({
            method: "onUserChange",
            data: {
              type: "create",//上课
              users: this.userInfoList()
            }
          }), teacher.window);
        }
      }
    },

    studentCount() {
      if (this.getTeacher()) {
        return this.userList.length - 1;
      }
      else {
        return this.userList.length;
      }

    },
    getTeacher() {
      for (let i = 0; i < this.userList.length; i++) {
        if (this.userList[i].info.role == 0) {
          return this.userList[i];
        }
      }
      return null;
    },
    userInfoList() {
      let arr = [];
      this.userList.forEach(user => {
        arr.push(user.info);
      });
      return arr;
    },
    broadcast(msg, exceptWindow) {
      for (let i = 0; i < this.userList.length; i++) {
        if (this.userList[i].window == exceptWindow) {
          continue;
        }
        this.userList[i].window.postMessage(msg, '*');
      }
    },
    sendMsg(msg, tag) {
      let win = null;
      if (typeof tag == "string") {
        let user = this.getUser(tag);
        if (!user) {
          return;
        }
        win = user.window;
      }
      else {
        win = tag;
      }

      win.postMessage(msg, '*');
    },
    addRole(userInfo) {
      let tkUser = new TKUser(userInfo);
      tkUser.createFrame();
      LocalClassroom.userList.push(tkUser);
      setTimeout(() => {
        //广播进入消息。
        this.broadcast(JSON.stringify({
          method: "onUserChange",
          data: {
            type: "join",//老师进来create 学生进来join
            users: [userInfo]
          }
        }));
      }, 0);
    },
    disConnectRole(uuid) {
      let ind = this.getUserInd(uuid);
      if (ind == -1) {
        return;
      }
      let user = this.userList.splice(ind, 1)[0];
      let userInfo = user.info;
      user.dispose();

      this.broadcast(JSON.stringify({
        method: "onUserChange",
        data: {
          type: "leave",
          users: [userInfo]
        }
      }));
    },
    reconnectRole(userInfo) {
      let tkUser = new TKUser(userInfo);
      tkUser.createFrame();
      LocalClassroom.userList.push(tkUser);


      this.broadcast(JSON.stringify({
        method: "onUserChange",
        data: {
          type: "join",
          users: [userInfo]
        }
      }));
    },
    getUser(uuid) {
      for (let i = 0; i < this.userList.length; i++) {
        let user = this.userList[i];
        if (user.info.id == uuid) {
          return user;
        }
      }
      return false;
    },
    getUserInd(uuid) {
      for (let i = 0; i < this.userList.length; i++) {
        let user = this.userList[i];
        if (user.info.id == uuid) {
          return i;
        }
      }
      return -1;
    },
    delRole(uuid) {
      let ind = this.getUserInd(uuid);
      if (ind == -1) {
        return;
      }
      let user = this.userList.splice(ind, 1)[0];
      let userInfo = user.info;
      user.dispose();

      //广播进入消息。
      this.broadcast(JSON.stringify({
        method: "onUserChange",
        data: {
          type: "leave",
          users: [userInfo]
        }
      }));
    },

    msgs: [],
    lastMsg: null,
    cloneLastMsg() {
      if (!this.lastMsg) {
        return;
      }
      let msg = JSON.parse(JSON.stringify(this.lastMsg));
      msg.isRestore = true;
      return msg;
    },
    clearLastMsg() {
      this.lastMsg = null;
      if (!LocalClassroom.lastMsg) {
        btnClearLastMsg.setAttribute("disabled", "");
      }
      else {
        btnClearLastMsg.removeAttribute("disabled");
      }
    }
  };

  var onClickClearLastMsg = function () {
    LocalClassroom.clearLastMsg();
  };
  var onClickLogLastMsg = function () {
    console.log("教室保存的数据:", LocalClassroom.lastMsg);
  }
  var onToggleColumn = function () {
    if (LocalClassroom.columnType == 1) {
      container.style.display = "flex";
      container.style.flexWrap = "wrap";
      LocalClassroom.columnType = 2;
    }
    else {
      container.style.display = "";
      container.style.flexWrap = "";
      LocalClassroom.columnType = 1;
    }

    refreshColumn();
    LocalClassroom.save();

  }
  var refreshColumn = function () {
    if (container.style.display == "flex") {
      for (let i = 0; i < container.children.length; i++) {
        let frame = container.children[i];
        frame.style.width = "50%";
        frame.querySelector("iframe").style.height = frame.clientWidth * 0.56372 + "px";
      }
    }
    else {
      for (let i = 0; i < container.children.length; i++) {
        let frame = container.children[i];
        frame.style.width = "100%";
        frame.querySelector("iframe").style.height = frame.clientWidth * 0.56372 + "px";
      }
    }
  };
  var onClickTeacherEnter = function () {
    if (!LocalClassroom.getTeacher()) {
      onClickAddRole(0);
    }
  };

  var onClickDelRole = function (uuid) {
    LocalClassroom.delRole(uuid);

    lbStudentCount.innerText = LocalClassroom.studentCount();

    if (LocalClassroom.getTeacher()) {
      btnAddTeacher.setAttribute("disabled", "");
    }
    else {
      btnAddTeacher.removeAttribute("disabled");
    }
  }
  var onClickRoleLeave = function (uuid) {

  }
  var onClickOffline = function (uuid) {
    let user = LocalClassroom.getUser(uuid);
    let msg = LocalClassroom.cloneLastMsg();
    if (msg) {
      LocalClassroom.sendMsg(JSON.stringify(msg), user.window);
    }
  }
  var onClickRefreshRole = function (uuid) {
    let user = LocalClassroom.getUser(uuid);
    let userInfo = user.info;
    LocalClassroom.disConnectRole(uuid);
    setTimeout(() => {
      LocalClassroom.reconnectRole(userInfo);
    }, 500);
  }
  var onClickTogglePermission = function (uuid) {
    if (!App.inited) {
      return;
    }
    //toggle
    let user = LocalClassroom.getUser(uuid);
    user.blocked = (user.blocked != 0 ? 0 : 1);

    App.broadcastPermission();
  }

  var onClickAddRole = function (roleType, roleName) {
    let uuid = getUUid();
    if (roleType == 0) {
      roleName = "老师";
      uuid = "uuid-teacher";
    }
    else {
      roleName = roleName || getUserName();
    }

    //将用户信息写入到列表中。
    let userInfo = {
      id: uuid,
      nickname: roleName,
      role: roleType
    };

    LocalClassroom.addRole(userInfo);
    lbStudentCount.innerText = LocalClassroom.studentCount();
    if (LocalClassroom.getTeacher()) {
      btnAddTeacher.setAttribute("disabled", "");
    }
    else {
      btnAddTeacher.removeAttribute("disabled");
    }
  };

  // btnClass.style.background = (LocalClassroom.inClass ? "green" : "red");
  // btnClass.innerText = (LocalClassroom.inClass ? "下课" : "上课");
  // var onToggleClass = function () {
  //   LocalClassroom.toggleClass();

  //   btnClass.style.background = (LocalClassroom.inClass ? "green" : "red");
  //   btnClass.innerText = (LocalClassroom.inClass ? "下课" : "上课");
  // }
  var onClickChangePage = function (type) {
    let pageId = LocalClassroom.pageId;
    switch (type) {
      case "<":
        pageId--;
        break;
      case ">":
        pageId++;
        break;
    }
    onClickJumpPage(pageId);
  };
  var onClickJumpPage = function (pageId) {
    if (LocalClassroom.pageId == pageId) {
      return;
    }
    if (pageId < 1) {
      pageId = 1;
    }
    LocalClassroom.pageId = pageId;
    ebPageNum.value = LocalClassroom.pageId;

    LocalClassroom.broadcast(JSON.stringify({
      method: "onJumpPage",
      toPage: LocalClassroom.pageId
    }));
  };

  var onClickHelp = function () {
    let wrap = document.createElement("div");
    Object.assign(wrap.style, {
      position: "absolute",
      background: "rgba(0,0,0,0.7)",
      left: "0",
      top: "0",
      width: "100%",
      height: "100%",
    });
    wrap.onclick = () => {
      document.body.removeChild(wrap);
      wrap = null;
    };

    let panel = document.createElement("div");
    Object.assign(panel.style, {
      // position: "absolute",
      background: "#ccc",
      borderRadius: "15px",
      left: "0",
      top: "0",
      minWidth: "100px",
      width: "70%",
      height: "50%",
      margin: "25% auto",
      color: "black",
      padding: "20px",
    });

    let log = "";
    for (let i = 0; i < MACRO.DEV_LOG.length; i++) {
      let [version, detail] = MACRO.DEV_LOG[i];
      log += `<li><span style="font-weight:bold;">${version}</span>${detail}</li>`;
    }
    panel.innerHTML =
      `<h3 style="text-align:center;">${MACRO.APP_NAME} ${MACRO.VERSION} 说明</h3>
      <p>地址后面加上?app=0 来禁用客户端功能（小手功能）</p>
      <h3 style="text-align:center;">更新列表</h3>
      <ul>${log}</ul>
      `;

    document.body.appendChild(wrap);
    wrap.appendChild(panel);
  }

  var UuidCounter = 0;
  var getUUid = function () {
    return `uuid-${++UuidCounter}`;
  }
  let lib = ["乐", "婧", "靖", "妍", "适", "一", "心", "可", "姚", "欣", "睦", "馨", "彩", "桃", "莉", "礼", "迪", "文", "惠", "淇", "舒", "沁", "如", "白", "月", "雪", "钿", "美", "滇", "花", "芯", "姗", "黎", "淼", "佩", "防", "好", "烨", "晔", "旭", "妙", "希", "望", "青", "妮", "爱", "摇", "萍", "许", "婉", "晴", "静", "咏", "漫", "雅"];
  let pick = function () {
    return lib[Math.floor(Math.random() * (lib.length - 1))];
  };
  let getUserName = function () {
    return `${pick()}${pick()}`;
  }
  document.body.onload = () => {
    LocalClassroom.init();
    if (urlParams.app == "0") {
      appPad.style.display = "none";
    }
    else {
      appPad.style.display = "";
      App.init();
    }

    if (LocalClassroom.isAutoAddTeacher) {
      onClickTeacherEnter();
    }
  };

  window.onresize = refreshColumn;

</script>

</html>